<style>
  .picImg {
    width: 40px;
    height: 40px;
  }
</style>
<template>
  <div class="app-container">
    <!--&lt;!&ndash; 查询和其他操作 &ndash;&gt;-->
    <div class="filter-container" style="height: 600px;">

      <div class="handle-add" style="padding: 80px 30px 30px 60px; display: flex">
        <el-menu default-active="1" style="border: 0; width:25%" class="el-menu-vertical-demo">
          <el-menu-item index="1" @click="active1" style="font-size: 16px">
            <i class="el-icon-tickets" style="font-size: 22px"></i>
            <span slot="title">个人基本信息</span>
          </el-menu-item>
          <el-menu-item index="2" @click="active2" style="font-size: 16px">
            <i class="el-icon-share" style="font-size: 22px"></i>
            <span slot="title">公司信息</span>
          </el-menu-item>
          <el-menu-item index="3" @click="active3" style="font-size: 16px">
            <i class="el-icon-menu" style="font-size: 22px"></i>
            <span slot="title">统计信息</span>
          </el-menu-item>
        </el-menu>

        <el-form ref="editForm" :model="userInfo" status-icon label-position="right" v-if="show1"
                 label-width="150px" style="width: 70%; display: flex">
          <div style="flex: 1;margin-left: 30px">
            <el-form-item label="登录用户名：">
              <span>{{userInfo.userName}}</span>
            </el-form-item>
            <el-form-item label="手机号：">
              <span>{{userInfo.mobile}}</span>
            </el-form-item>
            <el-form-item label="最后登录时间：">
              <span>{{userInfo.timeLastLogin}}</span>
            </el-form-item>
            <el-form-item label="最后登录IP地址：">
              <span>{{userInfo.lastLoginIP}}</span>
            </el-form-item>
            <el-form-item label="注册时间：">
              <span>{{userInfo.timeAdd}}</span>
            </el-form-item>
            <el-form-item label="是否已实名认证：">
              <span>{{userInfo.isChecked}}</span>
            </el-form-item>
            <el-form-item label="真实姓名：">
              <span>{{userInfo.realName}}</span>
            </el-form-item>
          </div>
          <div style="flex: 1">
            <el-form-item label="银行账户号：">
              <span>{{userInfo.account}}</span>
            </el-form-item>
            <el-form-item label="账户银行标准编码：">
              <span>{{userInfo.bankCode}}</span>
            </el-form-item>
            <el-form-item label="佣金总额：">
              <span>{{userInfo.commTotal}}</span>
            </el-form-item>
            <el-form-item label="当前未提现佣金：">
              <span>{{userInfo.commission}}</span>
            </el-form-item>
            <el-form-item label="一级推广人数：">
              <span>{{userInfo.expend1}}</span>
            </el-form-item>
            <el-form-item label="二级推广人数：">
              <span>{{userInfo.expend2}}</span>
            </el-form-item>
            <el-form-item label="三级推广人数：">
              <span>{{userInfo.expend3}}</span>
            </el-form-item>
          </div>
        </el-form>

        <el-form ref="editForm2" :model="userInfo2" status-icon label-position="right" v-if="show2"
                 label-width="150px" style="width: 70%;display: flex">
          <div style="flex: 1;margin-left: 30px;">
            <el-form-item label="统一信用代码：">
              <span>{{userInfo2.unicode}}</span>
            </el-form-item>
            <el-form-item label="公司名称：">
              <span>{{userInfo2.companyName}}</span>
            </el-form-item>
            <el-form-item label="公司所在省份：">
              <span>{{userInfo2.province}}</span>
            </el-form-item>
            <el-form-item label="公司所在城市：">
              <span>{{userInfo2.city}}</span>
            </el-form-item>
            <el-form-item label="企业类型编码：">
              <span>{{userInfo2.typeCode}}</span>
            </el-form-item>
            <el-form-item label="企业细类编码：">
              <span>{{userInfo2.detailCode}}</span>
            </el-form-item>
            <el-form-item label="法人姓名：">
              <span>{{userInfo2.legalName}}</span>
            </el-form-item>
          </div>
          <div style="flex: 1">
            <el-form-item label="法人证件号码：">
              <span>{{userInfo2.legalID}}</span>
            </el-form-item>
            <el-form-item label="法人手机号：">
              <span>{{userInfo2.legalMobile}}</span>
            </el-form-item>
            <el-form-item label="法人证件登记日期：">
              <span>{{userInfo2.legalIDRegDate}}</span>
            </el-form-item>
            <el-form-item label="法人证件到期日期：">
              <span>{{userInfo2.legalIDExpiry}}</span>
            </el-form-item>
            <el-form-item label="法人证件签发城市代码：">
              <span>{{userInfo2.legalIDCity}}</span>
            </el-form-item>
            <el-form-item label="添加时间：">
              <span>{{userInfo2.timeAdd}}</span>
            </el-form-item>
            <el-form-item label="签约银行个数：">
              <span>{{userInfo2.signTimes}}</span>
            </el-form-item>
          </div>
        </el-form>

        <el-form ref="editForm2" :model="userInfo3" status-icon label-position="right" v-if="show3"
                 label-width="200px" style="width: 60%; ">
          <el-form-item label="总贴现次数：">
            <span>{{userInfo3.totalDis}}</span>
          </el-form-item>
          <el-form-item label="总贴现金额：">
            <span>{{userInfo3.totalDisAmount}}</span>
          </el-form-item>
          <el-form-item label="总贴现佣金：">
            <span>{{userInfo3.totalComm}}</span>
          </el-form-item>
          <el-form-item label="当年贴现次数：">
            <span>{{userInfo3.yearDis}}</span>
          </el-form-item>
          <el-form-item label="当年贴现金额：">
            <span>{{userInfo3.yearDisAmount}}</span>
          </el-form-item>
          <el-form-item label="当年贴现佣金：">
            <span>{{userInfo3.yearComm}}</span>
          </el-form-item>
          <el-form-item label="推广贴现统计：">
            <span>{{userInfo3.extends}}</span>
          </el-form-item>
        </el-form>

      </div>

    </div>
  </div>
</template>

<script>
import {doGet, doPost} from '@/api'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
  name: 'bank',
  components: { Pagination },
  filters: {},
  data() {
    return {
      list: [],
      total: 0,
      show1: true,
      show2: false,
      show3: false,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
      },
      editForm: {
      },
      editFormRules: {
      },
      userInfo: {
        userName: undefined,
        mobile: undefined,
        timeLastLogin: undefined,
        lastLoginIP: undefined,
        timeAdd: undefined,
        isChecked: undefined,
        realName: undefined,
        account: undefined,
        bankCode: undefined,
        commTotal: undefined,
        commission: undefined,
        expend1: undefined,
        expend2: undefined,
        expend3: undefined
      },
      userInfo2: {
        unicode: undefined,
        companyName: undefined,
        province: undefined,
        city: undefined,
        typeCode: undefined,
        detailCode: undefined,
        legalName: undefined,
        legalID: undefined,
        legalMobile: undefined,
        legalIDRegDate: undefined,
        legalIDExpiry: undefined,
        legalIDCity: undefined,
        timeAdd: undefined,
        signTimes: undefined
      },
      userInfo3: {
        totalDis: undefined,
        totalDisAmount: undefined,
        totalComm: undefined,
        yearDis: undefined,
        yearDisAmount: undefined,
        yearComm: undefined,
        extends: undefined
      }
    }
  },
  created() {
    this.getList1()
  },
  methods: {
    getList1() {
      doPost('personal.html?op=info', {}).then(response => {
        this.userInfo = response.data
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: error.message
        })
      })
    },
    getList2() {
      doPost('personal.html?op=compinfo', {}).then(response => {
        this.userInfo2 = response.data
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: error.message
        })
      })
    },
    getList3() {
      doPost('personal.html?op=stat', {}).then(response => {
        this.userInfo3 = response.data
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: error.message
        })
      })
    },
    active1() {
      this.getList1()
      if(this.show1 = true) {
        this.show2 = false
        this.show3 = false
      }
    },
    active2() {
      this.getList2()
      if (this.show2 = true) {
        this.show1 = false
        this.show3 = false
      }
    },
    active3() {
      this.getList3()
      if (this.show3 = true){
        this.show1 = false
        this.show2 = false
      }
    },
  }
}
</script>
